<template>
    <div class="img-list-preview">
        <div class="body">
            <div class="list row">
                <div
                    class="item"
                    v-for="(img, index) in images"
                    :key="index"
                    @click="showImagePreview(img, index)"
                >
                    <img :src="img" />
                </div>

                <div
                    class="item btn-add"
                    v-if="images.length < 9 && images.length > 0"
                    @click="$emit('add-image')"
                >
                    <img :src="require('@/assets/icon/add_img.png')" />
                </div>
            </div>
        </div>

        <!-- 图片预览 -->
        <van-image-preview
            v-model="showPreview"
            :images="images"
            @change="onChange"
            :startPosition="startPosition"
            :showIndex="true"
            :showIndicators="true"
        >
            <!-- <template v-slot:index>第{{ index }}页</template> -->
        </van-image-preview>
    </div>
</template>

<script>
export default {
    props: {
        images: Array
    },
    data() {
        return {
            showPreview: false,
            startPosition: 0,
            index: 0
        };
    },

    methods: {
        onChange() {
            return;
        },
        showImagePreview(img, index) {
            this.showPreview = true;
            this.startPosition = index;
        }
    }
};
</script>


<style lang="less" scoped>
.img-list-preview {
    .body {
        width: 95vw;
        height: 95vw;
        margin: 0 auto;

        .list {
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
            .item {
                position: relative;
                flex: 0 0 auto;
                width: 33.3333%;
                height: 33.3333%;

                img {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    // display: block;
                    // min-width: 100%;
                    // min-height: 100%;
                    transform: translateX(-50%) translateY(-50%);
                }
            }
            .btn-add {
                img {
                    width: 106%;
                }
            }
        }
    }
}
</style>